﻿<!DOCTYPE html>
<!-- saved from url=(0081)http://www.position-relative.net/creation/formValidator/demos/demoValidators.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JQuery Validation Engine</title>
    <link href="Styles/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <link href="Styles/template.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validationEngine-en.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validationEngine.js" type="text/javascript"></script>
    <script>
        jQuery(document).ready(function () {
            // binds form submission and fields to the validation engine
            jQuery("#formID").validationEngine();
        });

        /**
        *
        * @param {jqObject} the field where the validation applies
        * @param {Array[String]} validation rules for this field
        * @param {int} rule index
        * @param {Map} form options
        * @return an error string if validation failed
        */
        function checkHELLO(field, rules, i, options) {
            if (field.val() != "HELLO") {
                // this allows to use i18 for the error msgs
                return options.allrules.validate2fields.alertText;
            }
        }
        </script>
</head>
<body>
    <p>
        <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
            onclick="alert(&#39;is the form valid? &#39;+jQuery(&#39;#formID&#39;).validationEngine(&#39;validate&#39;))">
            Evaluate form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
                onclick="jQuery(&#39;#test&#39;).validationEngine(&#39;validateField&#39;, &#39;#sport&#39;)">
                Validate sport1 select</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
                    onclick="jQuery(&#39;#sport&#39;).validationEngine(&#39;hide&#39;)">Close favorite
                    sport 1 prompt</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
                        onclick="jQuery(&#39;#formID&#39;).validationEngine(&#39;hide&#39;)">Close all prompts
                        on form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
                            onclick="jQuery(&#39;#test&#39;).validationEngine(&#39;showPrompt&#39;, &#39;This is an example&#39;, &#39;pass&#39;)">
                            Build a prompt on a div</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
                                onclick="jQuery(&#39;#test&#39;).validationEngine(&#39;hide&#39;)">Close div prompt</a>
        | <a href="http://www.position-relative.net/creation/formValidator/demos/index.html">
            Back to index</a>
    </p>
    <p>
        This demonstration shows the different validators available
        <br>
    </p>
    <div id="test" class="test" style="width: 150px;">
        This is a div element</div>
    <form id="formID" class="formular" method="post" action="">
    <fieldset>
        <legend></legend>
        <label>
            <span>Field is required : </span>
            <input value="" class="validate[required] text-input" type="text" name="req" id="req">
        </label>
        <label>
            <span>Favorite sport 1:</span>
            <select name="sport" id="sport" class="validate[required]">
                <option value="">Choose a sport</option>
                <option value="option1">Tennis</option>
                <option value="option2">Football</option>
                <option value="option3">Golf</option>
            </select>
        </label>
        <label>
            <span>Favorite sport 2:</span>
            <select name="sport2" id="sport2" multiple="" class="validate[required]">
                <option value="">Choose a sport</option>
                <option value="option1">Tennis</option>
                <option value="option2">Football</option>
                <option value="option3">Golf</option>
            </select>
        </label>
        <br>
        validate[required]
    </fieldset>
    <fieldset>
        <legend>Custom </legend>
        <label>
            <div>
                Comes with many predifined regex (phone, url, ip, email..etc)
            </div>
            <a href="http://www.position-relative.net/creation/formValidator/demos/demoRegExp.html">
                [DEMO]</a>
            <br>
            <span>Enter a URL : </span>
            <input value="http://" class="validate[required,custom[url]] text-input" type="text"
                name="url" id="url">
            <br>
            validate[required,custom[url]]
        </label>
    </fieldset>
    <fieldset>
        <legend>Equals </legend>
        <label>
            <span>Password : </span>
            <input value="karnius" class="validate[required] text-input" type="password" name="password"
                id="password">
        </label>
        <label>
            <span>Confirm password : </span>
            <input value="kaniusBAD" class="validate[required,equals[password]] text-input" type="password"
                name="password2" id="password2">
            <br>
            validate[required,equals[password]]
        </label>
    </fieldset>
    <fieldset>
        <legend>Function </legend>
        <label>
            <span>Write 'HELLO' : </span>
            <input value="" class="validate[required,funcCall[checkHELLO]] text-input" type="text"
                id="lastname" name="lastname">
            <br>
            validate[required,funcCall[checkHELLO]]
        </label>
    </fieldset>
    <fieldset>
        <legend>MinSize </legend>
        <label>
            Minimum field size
            <br>
            <input value="" class="validate[required,minSize[6]] text-input" type="text" name="minsize"
                id="minsize">
            <br>
            validate[required,minSize[6]]
        </label>
    </fieldset>
    <fieldset>
        <legend>MaxSize </legend>
        <label>
            Maximum field size, optional
            <br>
            <input value="0123456789" class="validate[optional,maxSize[6]] text-input" type="text"
                name="maxsize" id="maxsize">
            <br>
            validate[optional,maxSize[6]]
        </label>
    </fieldset>
    <fieldset>
        <legend>Min </legend>
        <label>
            integer &gt;= -5
            <br>
            <input value="-7" class="validate[required,custom[integer],min[-5]] text-input" type="text"
                name="min" id="min">
            <br>
            validate[required,custom[integer],min[-5]]
        </label>
    </fieldset>
    <fieldset>
        <legend>Max </legend>
        <label>
            integer ,50]
            <br>
            <input value="55" class="validate[required,custom[integer],max[50]] text-input" type="text"
                name="max" id="max">
            <br>
            validate[required,custom[integer],max[50]]
        </label>
    </fieldset>
    <fieldset>
        <legend>Past </legend>
        <label>
            Checks that the value is a date in the past
            <br>
            <span>Please enter a date ealier than 2010/01/01</span>
            <input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] text-input"
                type="text" name="past" id="past">
            <br>
            validate[custom[date],past[2010/01/01]]
        </label>
    </fieldset>
    <fieldset>
        <legend>Future </legend>
        <label>
            Checks that the value is a date in the future
            <br>
            <span>Please enter a date older than today's date</span>
            <input value="2011-01-" class="validate[custom[date],future[NOW]] text-input" type="text"
                name="future" id="future">
            <br>
            validate[custom[date],future[NOW]]
        </label>
    </fieldset>
    <fieldset>
        <legend>Checkbox </legend>
        <label>
            Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoCheckbox.html">
                [DEMO]</a>
        </label>
    </fieldset>
    <fieldset>
        <legend>Ajax </legend>
        <label>
            Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html">
                [DEMO]</a>
        </label>
    </fieldset>
    <input class="submit" type="submit" value="Validate &amp; Send the form!"><hr>
    </form>
    <div class="reqformError parentFormformID formError" style="left: 799px; opacity: 0.87;
        top: 150px; margin-top: 0px;">
        <div class="formErrorContent">
            * This field is required<br>
        </div>
        <div class="formErrorArrow">
            <div class="line10">
                <!-- -->
            </div>
            <div class="line9">
                <!-- -->
            </div>
            <div class="line8">
                <!-- -->
            </div>
            <div class="line7">
                <!-- -->
            </div>
            <div class="line6">
                <!-- -->
            </div>
            <div class="line5">
                <!-- -->
            </div>
            <div class="line4">
                <!-- -->
            </div>
            <div class="line3">
                <!-- -->
            </div>
            <div class="line2">
                <!-- -->
            </div>
            <div class="line1">
                <!-- -->
            </div>
        </div>
    </div>
    <div class="urlformError parentFormformID formError" style="top: 465px; left: 799px;
        margin-top: 0px; opacity: 0.87;">
        <div class="formErrorContent">
            * Invalid URL<br>
        </div>
        <div class="formErrorArrow">
            <div class="line10">
                <!-- -->
            </div>
            <div class="line9">
                <!-- -->
            </div>
            <div class="line8">
                <!-- -->
            </div>
            <div class="line7">
                <!-- -->
            </div>
            <div class="line6">
                <!-- -->
            </div>
            <div class="line5">
                <!-- -->
            </div>
            <div class="line4">
                <!-- -->
            </div>
            <div class="line3">
                <!-- -->
            </div>
            <div class="line2">
                <!-- -->
            </div>
            <div class="line1">
                <!-- -->
            </div>
        </div>
    </div>
</body>
</html>
